<template>
	<ynet-popup
		v-model="value"
		position="bottom"
		@beforeShow="$_onBeforeShow"
		@show="$_onShow"
		@beforeHide="$_onBeforeHide"
		@hide="$_onHide"
	>
		<div class="md-message-code">
			<div class="md-message-code-head">
				<div class="md-message-code-cancel" @click.stop="$_onCancel">取消</div>
				<div class="md-message-code-title">请输入验证码</div>
				<div class="md-message-code-ok" @click.stop="$_onOk">完成</div>
			</div>
			<div class="md-message-code-body">
				<div class="md-message-code-phone">预留手机号: {{maskPhone}}</div>
				<div class="md-message-code-input">
					<ynet-input-item
						ref="myInputItem"
						placeholder="请输入验证码"
						clearable
						:maxlength="maxlength"
						is-virtual-keyboard
						virtual-keyboard-vm="myNumberKeyBoard"
						v-model="localValue"
					>
						<template v-slot:right>
							<div  class="md-message-code-get">
								<p v-show="!starting" @click="$_onStart">获取验证码</p>
								<p v-show="starting">
									<span>{{localTime | formatTime}}</span>秒后再获取
								</p>
							</div>
						</template>
					</ynet-input-item>
				</div>
				<div class="md-message-code-brief" v-show="starting && !localError">
					验证码已发送至{{maskPhone}},3分钟内有效
				</div>
				<div class="md-message-code-error">{{localError}}</div>
			</div>
		</div>
		<ynet-number-keyboard
			type="simple"
			ref="myNumberKeyBoard"
		>
			<template v-slot:default v-show="starting">
				<div class="numberKeyboard-slot" @click.stop="$_onClickAutoCode" v-show="localCode">
					<p class="from">来自"信息"</p>
					<span>{{localCode}}</span>
				</div>
			</template>
		</ynet-number-keyboard>
	</ynet-popup>
</template>
<script>
	import Popup from '../popup'
	import NumberKeyboard from '../number-keyboard'
	import InputItem from '../input-item'
	export default {
		name: 'ynet-message-code',
		components: {
			[Popup.name]: Popup,
			[NumberKeyboard.name]: NumberKeyboard,
			[InputItem.name]: InputItem
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			vaild: {
				type: Boolean,
				default: false
			},
			mobileNumber: {
				type: String,
				default: ''
			},
			time: {
				type: Number,
				default: 10
			},
			maxlength: {
				type: Number,
				default: 6
			}

		},
		data(){
			return {
				starting: false,
				localValue: '',
				localCode: '',
				localTime: this.time,
				localError: ''
			}
		},
		filters:{
			formatTime(t){
				return t < 10 ? `0${t}` : t
			}
		},
		computed: {
			maskPhone(){
				if(this.mobileNumber){
					return this.mobileNumber.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
				}
				return ''
			}
		},
		
		methods: {

			$_onBeforeShow(){
				this.$emit('beforeShow')
			},

			$_onShow(){
				this.$emit('show')
			},

			$_onBeforeHide(){
				this.$refs.myInputItem.blur()
				this.$refs.myNumberKeyBoard.hide()
				this.$emit('beforeHide')
			},

			$_onHide(){
				this.$_onRest()
			},
			$_onRest(){
				this.starting = false
				this.localError = ''
				this.localValue = ''
				this.localCode = ''
				this.$_onStop()

				this.$emit('input', false)
			},

			$_onStop(){
				clearInterval(this.timer)
				this.localTime = this.time
				this.starting = false
			},

			$_onOk(){
				this.$emit('input', false)
			},
			$_onCancel(){
				this.$emit('input', false)
			},
			$_onClickAutoCode(){
				this.localValue = this.localCode
			},
			$_onStart(){
				if(this.starting) return
				this.starting = true
				this.$_onCountDown()

				//这里是模拟rpc发请求到后台申请下发验证码，需改造
				setTimeout(() => {
					let createRandom = () => String(Math.floor(Math.random()*(999999-100000+1)+100000))
					this.localCode = createRandom()
				}, 2500)
			},
			$_onCountDown(){
				this.timer = setInterval(() => {
					if(this.localTime <= 0){
						this.$_onStop()
					}else{
						this.localTime = this.localTime - 1
					}
				}, 1000)
			},
			$_vaildCode(){
				//这里是模拟rpc到后台验证短信，并生成token
				setTimeout(() => {
					let createRes = () => Math.floor(Math.random()*(10-0+1)+0) > 5
					let res = createRes()
					if(res){
				this.$emit('input', false)
						this.$emit('finish',{ messageCode: this.localValue, token: 'token'})
					}else{
						this.localError = '验证码输入不正确,请重新输入'
					}
				}, 1000)
			}
		},
		watch:{
			localValue(val, oldVal){
				if(val.length <= this.maxlength){
					if(val.length == this.maxlength){
						if(this.vaild !== false){
							this.$_vaildCode()
						}else{
							this.$emit('finish',{ messageCode: this.localValue })
							this.$emit('input', false)
						}
					}
				}
			}
		}
	}
</script>
<style lang="stylus">
.md-message-code
	background cs-color-white
	height 9rem
	font-size .32rem
	border-radius .32rem .32rem 0 0
	overflow hidden

	.md-field-item-content
		remove-hairline(bottom)
	.md-field-item-content
		min-height 0.82rem
	.md-input-item-fake
		height 0.82rem
		line-height 0.82rem

	.md-message-code-head
		display flex
		align-items center
		justify-content space-between
		height .88rem
		position relative
		padding 0 h-gap-md
		hairline(bottom, cs-divider-color)
		.md-message-code-cancel
			color cs-color-text-body
		
		.md-message-code-title
			font-size cs-font-heading-normal

	.md-message-code-body
		padding .4rem .6rem
		.md-message-code-input
			border solid 0.5px #ccc
			border-radius 8px
			box-sizing border-box
			padding 0 .2rem
			margin .2rem 0
			font-size .32rem !important
		.md-message-code-get
			position relative
			hairline(left, cs-divider-color, 0, 4px)
			color cs-color-main
			margin-left .2rem
			padding-left .2rem
			p:last-child
				opacity .5
		.md-message-code-brief,
		.md-message-code-error
			font-size cs-font-body-large
			color cs-color-text-body
		
		.md-message-code-error
			color cs-color-main
.numberKeyboard-slot
	padding .1rem 0
	text-align center
</style>